﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Protection</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
        /*css_begin*/
        label {
            display:inline-block;
            width: 180px;
        }
        /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
    /*code_begin*/
    $(document).ready(function () {
        var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });
        initSpread(spread);
    });

    function initSpread(spread) {
        var spread = $('#ss').data('spread');
        var sheet = spread.getActiveSheet();

        spread.isPaintSuspended(true);
        var style = new GcSpread.Sheets.Style();
        style.locked = false;
        style.backColor = "lightGreen";
        sheet.setStyle(1, 1, style);
        sheet.setStyle(1, 2, style);
        sheet.setStyle(5, 1, style);
        sheet.setStyle(5, 2, style);
        sheet.setStyle(8, -1, style);
        sheet.setStyle(9, -1, style);
        sheet.setStyle(12, -1, style);
        sheet.setStyle(13, -1, style);
        sheet.setStyle(-1, 8, style);
        sheet.setStyle(-1, 9, style);
        sheet.setStyle(-1, 12, style);
        sheet.setStyle(-1, 13, style);
        var style2 = new GcSpread.Sheets.Style();
        style2.locked = true;
        style2.backColor = "gray";
        sheet.setStyle(13, 1, style2);
        sheet.setStyle(1, 13, style2);

        sheet.addTable("table1", 2, 3, 4, 4);

        var filter = new GcSpread.Sheets.HideRowFilter(new GcSpread.Sheets.Range(0, 0, 100, 2));
        sheet.rowFilter(filter);
        var comment1 = new GcSpread.Sheets.Comment();
        comment1.text("locked");
        var comment2 = new GcSpread.Sheets.Comment();
        comment2.text("unlocked");
        sheet.setComment(17, 0, comment1);
        sheet.setComment(17, 4, comment2);
        sheet.getComment(17, 0).locked(true).displayMode(1);
        sheet.getComment(17, 4).locked(false).displayMode(1).lockText(false);

        spread.isPaintSuspended(false);

        var option = {
            allowFilter: true,
            allowSort: false,
            allowResizeRows: true,
            allowResizeColumns: false,
            allowEditObjects: false
        };
        sheet.protectionOption(option);
        sheet.setIsProtected(true);
        
        option = sheet.protectionOption();
        $("#chkProtectSheet").prop("checked", sheet.getIsProtected());
        $("#chkSelectLockedCells").prop("checked", option.allowSelectLockedCells);
        $("#chkSelectUnlockedCells").prop("checked", option.allowSelectUnlockedCells);
        $("#chkAllowSort").prop("checked", option.allowSort);
        $("#chkAllowFilter").prop("checked", option.allowFilter);
        $("#chkAllowResizeRows").prop("checked", option.allowResizeRows);
        $("#chkAllowResizeColumns").prop("checked", option.allowResizeColumns);
        $("#chkAllowEditObjects").prop("checked", option.allowEditObjects);

        $("#chkProtectSheet").click(function () {
            var sheet = spread.getActiveSheet();
            var value = $(this).prop("checked");
            sheet.setIsProtected(value);
        });

        $("#setProtectionOption").click(function () {
            var option = {
                allowSelectLockedCells: $("#chkSelectLockedCells").prop("checked"),
                allowSelectUnlockedCells: $("#chkSelectUnlockedCells").prop("checked"),
                allowSort: $("#chkAllowSort").prop("checked"),
                allowFilter: $("#chkAllowFilter").prop("checked"),
                allowResizeRows: $("#chkAllowResizeRows").prop("checked"),
                allowResizeColumns: $("#chkAllowResizeColumns").prop("checked"),
                allowEditObjects: $("#chkAllowEditObjects").prop("checked")
            };

            var sheet = spread.getActiveSheet();
            sheet.protectionOption(option);
        });
    }
    /*code_end*/
    </script>
</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:340px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <input id="chkProtectSheet" type="checkbox" />
            <label for="chkProtectSheet">Protect Sheet</label>
        </div>
        <br />
        <div class="option-row">
            <label>Protection options:</label>
        </div>
        <div style="margin-left:12px">
            <div class="option-row">
                <input id="chkSelectLockedCells" type="checkbox" checked="checked" />
                <label for="chkSelectLockedCells">Select locked cells</label>
                <input id="chkSelectUnlockedCells" type="checkbox" checked="checked" />
                <label for="chkSelectUnlockedCells">Select unlocked cells</label>
            </div>
            <div class="option-row">
                <input id="chkAllowSort" type="checkbox" />
                <label for="chkAllowSort">Sort</label>
                <input id="chkAllowFilter" type="checkbox" />
                <label for="chkAllowFilter">Filter</label>
            </div>
            <div class="option-row">
                <input id="chkAllowResizeRows" type="checkbox" />
                <label for="chkAllowResizeRows">Resize rows</label>
                <input id="chkAllowResizeColumns" type="checkbox" />
                <label for="chkAllowResizeColumns">Resize columns</label>
            </div>
            <div class="option-row">
                <input id="chkAllowEditObjects" type="checkbox" />
                <label for="chkAllowEditObjects">Edit objects</label>
            </div>
            <div class="option-row">
                <input type="button" value="Set" id="setProtectionOption" style="width:100px;margin-left:240px;"/>
            </div>
        </div>
    </div>
</div>
</body>
</html>